<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>扫二维码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="/css/mui.min.css">
    <script src="/js/app.js"></script>
    <style>
        /*标题样式*/

        .mui-title {
            color: #494A5F;
            width: 90%;
            font-weight: bold;
        }

        .mui-bar {
            background-color: #ffffff;
        }

        .mui-bar-nav {
            top: 0;
            -webkit-box-shadow: 0 0px 0px #d5d7dc;
            box-shadow: 0 0px 0px #d5d7dc;
        }

        /*整体背景样式*/

        body {
            background-color: #494A5F;
        }

        /*内容背景色*/

        .mui-content {
            background-color: #494A5F;
        }

        .mui-table {
            /*background-color: #ffffff;*/
            margin-top: 2.67%;
        }

        p {
            color: #DBDBDF;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-back mui-icon mui-icon-left-nav mui-pull-left" id="back"  style="color:#494A5F"></a>
    <h1 class="mui-title">扫二维码</h1>
</header>
<div class="mui-content">
    <div class="mui-table " style="width: 100%; margin-bottom: 15%">
        <div id="detailContent" class="mui-row " style="margin: 2% 3%;font-size:14px; ">
            <div class="mui-row mui-col-xs-12"
                 style="background-color: #ffffff;text-align: left; color: #ffffff; padding: 5px;  margin: 5% 0; border-radius: 5px;">
                <div class="mui-col-xs-12" id="card"
                     style="text-align: left; margin-top: 10px;color: #1ae8e2; font-size: 10px;">
                </div>
            </div>

            <div class="mui-row mui-col-xs-12" style="background-color: #ffffff; border-radius: 5px;">
                <div class="mui-col-xs-12">
                    <div style="color: #111111; padding: 9px 0 0 9px; font-size: 9px;">请向商户出示二维码</div>
                    <div id="qrcode" style="text-align: center; height: 30%;padding: 27px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="qrcode"></div>
</div>
<script src="/js/mui.min.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script src="/js/qrcode.js"></script>
<script src="/js/jquery.qrcode.js"></script>
<script>

    /**
     * 初始化
     */
    mui.init({

    });

    mui.ready(function () {
        mui('#back')[0].addEventListener('tap', function (e) {
            e.preventDefault();

            mui.openWindow({
                url: app.ip + 'my/my_coupon.html',
                id: 'my_coupon'
            });

        });

    });


    var contents = "";
    contents = window.location.href.split('?')[1];
    // var contents=$('#contents').val();

    document.getElementById("card").innerHTML = "<p style='text-align: left; padding-left:11px; color: #111111;border-radius: 5px;'>券码号：" + contents + "</p>";

    if ($("canvas")) {
        $("canvas").remove();
    }
    jQuery('#qrcode').qrcode({
        text: contents
    });


</script>
</body>

</html>